<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>Expand row in DataGrid to show subgrid - jQuery EasyUI Demo</title>

    <!--<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>-->


    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">

    <!-- 需引入的css文件 -->
    <!--<link rel="stylesheet" type="text/css" href="./css/druginfo.css">-->

    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/datagrid-detailview.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

    <!-- 引入js -->
    <!--<script type="text/javascript" src="./js/dateformat.js"></script>-->
    <!--<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
    <script type="text/javascript" src="./js/drugstorage.js"></script>-->



</head>
<body>

<div class="easyui-panel" style="width:100%;height:auto" title="药品入库审核" data-options="border:false">
    <form id="form1">
        <table cellpadding="5">
            <tr>
                <td>申请科室:</td>
                <td>
                    <input class="easyui-combobox" id="id_apply_dep" value="全部">
                </td>
                <td>审核状态:</td>
                <td>
                    <input class="easyui-combobox" id="id_apply_stats" value="未审核">
                </td>
                <td>
                    <a id="id_search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="easyui-panel" style="width:100%;height:auto" title="" data-options="border:false">
    <table id="dg" style="width:100%;height:250px"
           url="datagrid22_getdata.php"
           title="审核信息"
           singleSelect="true" fitColumns="true">
        <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="100">Product ID</th>
            <th field="listprice" align="right" width="80">List Price</th>
            <th field="unitcost" align="right" width="80">Unit Cost</th>
            <th field="attr1" width="220">Attribute</th>
            <th field="status" width="60" align="center">Status</th>
        </tr>
        </thead>
    </table>
</div>


<script type="text/javascript">
    $(function(){
        $('#dg').datagrid({
            view: detailview,
            detailFormatter:function(index,row){
                return '<div style="padding:2px"><table class="ddv"></table></div>';
            },
            onExpandRow: function(index,row){
                var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                ddv.datagrid({
                    url:'http://www.jeasyui.com/demo/main/datagrid22_getdetail.php?itemid='+row.itemid,
                    fitColumns:true,
                    singleSelect:true,
                    rownumbers:true,
                    loadMsg:'',
                    height:'auto',
                    columns:[[
                        {field:'orderid',title:'Order ID',width:200},
                        {field:'quantity',title:'Quantity',width:100,align:'right'},
                        {field:'unitprice',title:'Unit Price',width:100,align:'right'}
                    ]],
                    onResize:function(){
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    },
                    onLoadSuccess:function(){
                        setTimeout(function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        },0);
                    }
                });
                $('#dg').datagrid('fixDetailRowHeight',index);
            }
        });
    });
</script>


</body>
</html>